<template>
<el-collapse-transition>
    <div class="pagewrapp">
        <div class="pagewrapp-bread">
            <svg-icon class="back" icon-class="back" @click="handleBack" />
            <template v-for="(item, index) in newTitle">
                <span :class="{'link-span': (item.path || item.from) && index>0}" :key="index" @click="handleClick(item.path, item.from, index)">{{item.name}} <i v-if="index<newTitle.length - 1"> / </i></span>
            </template>
        </div>
        <slot></slot>
    </div>
</el-collapse-transition>
    
</template>

<script>
export default {
    props: {
        pageDialog: {
            required: true,
            default: ({
                title: "列表",
                visible: false
            })
        }
    },
    computed: {
        sidebar() {
            return this.$store.getters.sidebar
        },
        menuName() {
            return this.$route.meta.title;
        }
    },
    watch: {
        '$route'() {
            this.pageDialog.visible = false;
        }
    },
    data() {
        return {
            newTitle: [],
        }
    },
    created() {
        this.initTitle();
    },
    methods: {
        handleBack() {
            this.pageDialog.visible = false;
        },
        initTitle() {
            let arr = [];
            this.$route.matched.map(item=>{
                if(item.meta) {
                    arr.push({name: item.meta.title, path: item.path});
                }
            })
            let titleArr = this.pageDialog.title.split("/"); /**处理多级二级界面嵌套问题 */
            titleArr.map((item, index) => {
                arr.push({
                    name: item, path: '', from: titleArr.length -1 == index? undefined : this.pageDialog.from
                })
            })
            this.newTitle = arr;
        },
        handleClick(path, from, index) {
            if(index == 0) return;
            if(path) {
                this.handleBack();
            } else if(from) {
                this.pageDialog.componentName = from.componentName;
                this.pageDialog.id = from.id;
                this.pageDialog.title = from.title;
                this.pageDialog.from = undefined;
            }
        }
    },
}
</script>

<style lang="scss">
// .pagewrapp {
//     z-index: 7 !important;
// }
// .pagewrapp>.el-dialog {
//   width: 100%;
//   height: calc(100vh - 116px);
//   box-shadow: none;
//   background: #fff;
//   padding: 12px 16px;
// }
// .pagewrapp>.el-dialog>.el-dialog__header {
//   display: none;
// }
// .pagewrapp>.el-dialog>.el-dialog__body{
//   padding: 0;
//   height: 100%;
// }
// .pagewrapp>.el-dialog:not(.is-fullscreen) {
//     margin-top: 80px !important;
// }
.pagewrapp {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    padding: 32px 12px 12px;
    overflow: auto;
    .pagewrapp-bread {
        width: 100%;
        height: 32px;
        line-height: 32px;
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 12px;
        z-index: 1;
        background: #f5f5f5;
        color: #323233;
        font-size: 14px;
        span {
            &:nth-of-type(1) {
                color: #969799;
            }
        }
        .back {
            cursor: pointer;
            margin-right: 16px;
            font-size: 20px;
            &:hover {
                color: var(--current-color);
            }
        }
        .link-span {
            color: #969799;
            cursor: pointer;
            padding-right: 8px;
            &:hover {
                color: var(--current-color);
            }
        }
    }
}
</style>